<template>
    <div class='fxn-body'>
        <el-upload ref="upload" multiple :accept="fileData.accept" :action="fileData.action" :headers="headers" :limit="fileData.limit" :file-list="fileList" :before-upload="handleBefore" :on-change="handSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" :on-preview="handlePreview">
            <el-button type="success">上传文件</el-button>
            <template #tip>
                <div class="el-upload__tip">支持格式：<span class="fxn-text-red">{{fileData.accept}}</span> ，单个文件不能超过<span class="fxn-text-red">{{fileData.size}}MB</span> ， 最多可上传<span class="fxn-text-red">{{fileData.limit}}</span>个文件</div>
            </template>
        </el-upload>
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        props: {
            fileData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            fileList: {
                type: Array,
                default: () => {
                    return []
                }
            },
        },
        setup(props) {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                fileArray: [],
                headers: {
                    token: localStorage.getItem('token')
                },
            })

            //文件上传成功
            const handSuccess = (file,fileList) => {
                proxy.$emit('update:fileList',fileList)
            }

            //文件删除
            const handleRemove = (file,fileList) => {
                if(file.status == 'ready'){
                    return proxy.$msg.error('访文件存在不可预知的错误，请谨慎选择所上传的文件!');
                }
                proxy.$msg.success('文件已删除成功!');
            }

            //文件较验
            const handleBefore = (file,fileList) => {
                //文件格式较验
                let arrFormat = props.fileData.accept.split(',')
                
                let arr = [];
                for(let key in arrFormat){
                    arr.push(arrFormat[key].slice(1))
                }
                
                //文件格式不正确
                let fileformat = file.name.split('.');
                if(arr.indexOf(fileformat[fileformat.length - 1]) < 0){
                    proxy.$msg.error('文件格式不正确,请重新选择!');
                    return false;
                }
                
                //文件大小较验
                if(file.size / 1024 / 1024 > props.fileData.size){
                    proxy.$msg.error('文件大小不能超过' + props.fileData.size + 'Mb');
                    return false;
                }
            }

            //限制文件
            const handleExceed = (file,fileList) => {
                proxy.$msg.error(`当前限制选择 ${props.fileData.limit} 个文件，本次选择了 ${file.length} 个文件，共选择了 ${file.length + fileList.length} 个文件`);
            }

            //查看文件
            const handlePreview = (file) => {
                window.open(file.xurl);
            }
            
            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                
                //组件方法
                handSuccess,
                handleRemove,
                handleBefore,
                handleExceed,
                handlePreview,
            }

        },
    })
</script>

<style scoped>
    
</style>